<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title id="title"></title>
    <style>
        * {
            box-sizing: border-box;
            -webkit-text-size-adjust: none;
            max-height:100%;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #fafafa;
        }

        audio {
            width: 100%;
        }

        .container {
            width: 100%;
            padding: 10px;
        }

        .flex,.felx{
            display: flex;
        }

        .video-group {
            background-color: rgba(0, 0, 0, .7);
            padding:10px 0;
        }

        .wx-col-6 {
            width: 50%;
        }

        .wx-pad-4 {
            padding: 4px;
        }

        .wx-col-4 {
            width: 35%;
        }

        .wx-col-8 {
            width: 66%;
        }

        .img-ys-box {
            padding-top: 10px;
        }

        .wx-col-s {
            width: 33.33%;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <div class="drag-item" v-for="(item,index) in tempList" :key="index" v-if="tempList.length>0">
            <div v-if="item.itemType == 'base'">
                <div class="flex" v-for="(rows,rowIndex) in item.childList" :key="index+'-'+rowIndex">
                    <div :style="{
                        marginTop:item.marginTop+'px',
                        marginLeft:item.marginLeft+'px',
                        marginBottom:item.marginBottom+'px',
                        marginRight:item.marginRight+'px',
                        paddingTop:item.paddingTop+'px',
                        paddingLeft:item.paddingLeft+'px',
                        paddingBottom:item.paddingBottom+'px',
                        paddingRight:item.paddingRight+'px',
                        borderColor:item.borderColor,
                        borderStyle:item.borderStyle,
                        borderWidth:item.borderWidth,
                        backgroundColor:item.backgroundColor,
                        width:(100/rows.childList.length+'%')
                    }" v-for="(cols,colIndex) in rows.childList" :key="index+'-'+rowIndex+'-'+colIndex">
                        <basetemp v-for="(itemTem,itemIndex) in cols.itemChildList"
                            :key="index+'-'+rowIndex+'-'+colIndex+'-'+itemIndex" v-if="itemTem.itemType"
                            :itemindex="itemIndex" :parindex="index" :rowindex="rowIndex" :colindex="colIndex"
                            :temp-data="itemTem" />
                    </div>
                </div>
            </div>
            <div v-if="item.itemType == 'textArea'">
                <div :style="{
                    marginTop:item.marginTop+'px',
                    marginLeft:item.marginLeft+'px',
                    marginBottom:item.marginBottom+'px',
                    marginRight:item.marginRight+'px',
                    paddingTop:item.paddingTop+'px',
                    paddingLeft:item.paddingLeft+'px',
                    paddingBottom:item.paddingBottom+'px',
                    paddingRight:item.paddingRight+'px',
                    textAlign:item.textAlign == 1?'left':(item.textAlign == 2?'right':'center'),
                    borderWidth:item.borderWidth+'px',
                    borderColor:item.borderColor,
                    borderStyle:item.borderStyle,
                    backgroundColor:item.backgroundColor,
                    fontSize:item.fontSize+'px',
                    color:item.fontColor,
                    fontWeight:item.fontWeight
                }">{{item.content}}</div>
            </div>
            <div v-if="item.itemType == 'input'">
                <div :style="{
                    marginTop:item.marginTop+'px',
                    marginLeft:item.marginLeft+'px',
                    marginBottom:item.marginBottom+'px',
                    marginRight:item.marginRight+'px',
                    paddingTop:item.paddingTop+'px',
                    paddingLeft:item.paddingLeft+'px',
                    paddingBottom:item.paddingBottom+'px',
                    paddingRight:item.paddingRight+'px',
                    textAlign:item.textAlign == 1?'left':(item.textAlign == 2?'right':'center'),
                    lineHeight:item.lineHeight+'px',
                    borderWidth:item.borderWidth+'px',
                    borderColor:item.borderColor,
                    borderStyle:item.borderStyle,
                    backgroundColor:item.backgroundColor,
                    fontSize:item.fontSize+'px',
                    color:item.fontColor,
                    fontWeight:item.fontWeight,
                    textIndent:item.textIndex==1?item.fontSize+'px':0
                }">{{item.content}}</div>
            </div>
            <div v-if="item.itemType == 'banner'">
                <div :style="{
                    marginTop:item.marginTop+'px',
                    marginLeft:item.marginLeft+'px',
                    marginBottom:item.marginBottom+'px',
                    marginRight:item.marginRight+'px',
                    borderRadius:item.borderRadius+'px',
                    overflow:'hidden'
                }">
                    <van-swipe :autoplay="3000" :vertical="item.type">
                        <van-swipe-item v-for="(item,index) in (Array.isArray(item.content)?item.content:[])"
                            :key="index">
                            <img :src="item | restImgUrl"  style="width:100%;height: 200px;"/>
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
            <div v-if="item.itemType == 'video'">
                <div class="video-group">
                    <div :style="{
                        marginTop:item.marginTop+'px',
                        marginLeft:item.marginLeft+'px',
                        marginBottom:item.marginBottom+'px',
                        marginRight:item.marginRight+'px',
                    }">
                        <video :width="item.width+'%'" :src="item.content | restImgUrl" controls></video>
                    </div>
                </div>
            </div>
            <div v-if="item.itemType == 'audio'">
                <div :style="{
                        marginTop:item.marginTop+'px',
                        marginLeft:item.marginLeft+'px',
                        marginBottom:item.marginBottom+'px',
                        marginRight:item.marginRight+'px',
                    }" style="padding:10px 0;min-height: 50px">
                    <audio width="100%" :src="item.content | restImgUrl" controls></audio>
                </div>
            </div>
            <div v-if="item.itemType == 'img'">
                <div class="item-type-box">
                    <div v-if="item.type>=1">
                        <div class="img-ys-box" :style="{
                            marginTop:item.marginTop+'px',
                            marginLeft:item.marginLeft+'px',
                            marginBottom:item.marginBottom+'px',
                            marginRight:item.marginRight+'px'
                        }">
                            <img :src="item.childList[0].content | restImgUrl" style="height:auto;width:100%"
                                v-if="item.type == 1" />
                            <div class="flex" v-if="item.type == 2">
                                <div class="wx-col-6 wx-pad-4" >
                                    <img :src="item.childList[0].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                                <div class="wx-col-6 wx-pad-4">
                                    <img :src="item.childList[1].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                            </div>
                            <div class="flex" v-if="item.type == 3">
                                <div class="wx-pad-4 wx-col-s" >
                                    <img :src="item.childList[0].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                                <div class="wx-pad-4 wx-col-s">
                                    <img :src="item.childList[1].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                                <div class="wx-pad-4 wx-col-s">
                                    <img :src="item.childList[2].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                            </div>
                            <div class="felx"  v-if="item.type == 4">
                                <div class="wx-col-4 wx-pad-4">
                                    <img :src="item.childList[0].content | restImgUrl" style="height:408px;width:100%" />
                                </div>
                                <div class="wx-pad-4 wx-col-8">
                                    <div class="wx-pad-4">
                                        <img :src="item.childList[1].content | restImgUrl"
                                            style="height:200px;width:100%" />
                                    </div>
                                    <div class="wx-pad-4">
                                        <img :src="item.childList[2].content | restImgUrl"
                                            style="height:200px;width:100%" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex" v-for="(rows,rowIndex) in item.row" :key="rowIndex" v-if="!item.type">
                            <div class="wx-pad-4" style="width:100%" v-for="(cols,colIndex) in item.col"
                                :key="rowIndex+'-'+colIndex">
                                <div :style="{
                                width:(100/item.col)+'%'
                            }"><img :src="item.childList[rowIndex*colIndex].content | restImgUrl"
                                        :style="{height:((item.row == 1 && item.col == 1)?'auto':'200px')}"
                                        style="width:100%" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top:10px;">
            <img src="http://www.efeeyun.com/static/css/common/images/Qr-code.gif" style="width: 100%;height: auto;" alt="">
        </div>
</body>

</html>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            tempList: [],
            baseUrl:'http://repolist.top'
        },
        filters: {
            restImgUrl(data) {
                let baseUrl='http://repolist.top';
                if (!data || data == 'undefined' || data == '') {
                    return '';
                }
                if (data.indexOf('http') != -1 || data.indexOf('https') != -1) {
                    return data;
                } else {
                    if(data.indexOf('.mp4') != -1){
                        return baseUrl+'/public/uploads/video/' + data;
                    }else if(data.indexOf('.mp3') != -1){
                        return baseUrl+'/public/uploads/audio/' + data;
                    }else{
                        return baseUrl+'/public/uploads/image/' + data;
                    }
                }
            }
        },
        mounted() {
            let id=window.location.search.split('=')[1];
            this.initPage(id)
        },
        methods: {
            initPage(id) {
                let that = this;
                vant.Toast.loading({ message: '加载中...', forbidClick: true });
                $.ajax({
                    type: "POST",
                    url: this.baseUrl+"/index.php?s=/api/yfcrm/index/articleDetail",
                    data: { id: id },
                    dataType: "json",
                    success: function (res) {
                        if (res.code == 1) {
                            $('#title').text(res.data.title);
                            that.tempList = JSON.parse(res.data.config);
                            console.log('data', that.tempList);
                        } else {
                            vant.Toast(res.msg);
                        }
                        vant.Toast.clear();
                    },
                    error: function (err) {
                        vant.Toast(JSON.stringify(err));
                    }
                });
            }
        }
    })

    Vue.use(vant.Toast);
    Vue.use(vant.Swipe);
    Vue.use(vant.SwipeItem);




    // 模板页
    Vue.component('basetemp', {
        props: ['parindex', 'rowindex', 'colindex', 'itemindex', 'tempData'],
        data: function () {
            return {
                count: 0
            }
        },
        filters: {
            restImgUrl(data) {
                let baseUrl='http://repolist.top';
                if (!data || data == 'undefined' || data == '') {
                    return '';
                }
                if (data.indexOf('http') != -1 || data.indexOf('https') != -1) {
                    return data;
                } else {
                    if(data.indexOf('.mp4') != -1){
                        return baseUrl+'/public/uploads/video/' + data;
                    }else if(data.indexOf('.mp3') != -1){
                        return baseUrl+'/public/uploads/audio/' + data;
                    }else{
                        return baseUrl+'/public/uploads/image/' + data;
                    }
                }
            }
        },
        template: `<div>
            <div v-if="tempData.itemType == 'textArea'">
                <div :style="{
                    marginTop:tempData.marginTop+'px',
                    marginLeft:tempData.marginLeft+'px',
                    marginBottom:tempData.marginBottom+'px',
                    marginRight:tempData.marginRight+'px',
                    paddingTop:tempData.paddingTop+'px',
                    paddingLeft:tempData.paddingLeft+'px',
                    paddingBottom:tempData.paddingBottom+'px',
                    paddingRight:tempData.paddingRight+'px',
                    textAlign:tempData.textAlign == 1?'left':(tempData.textAlign == 2?'right':'center'),
                    borderWidth:tempData.borderWidth+'px',
                    borderColor:tempData.borderColor,
                    borderStyle:tempData.borderStyle,
                    backgroundColor:tempData.backgroundColor,
                    fontSize:tempData.fontSize+'px',
                    color:tempData.fontColor,
                    fontWeight:tempData.fontWeight
                }">{{tempData.content}}</div>    
            </div>
            <div v-if="tempData.itemType == 'input'">
                    <div :style="{
                    marginTop:tempData.marginTop+'px',
                    marginLeft:tempData.marginLeft+'px',
                    marginBottom:tempData.marginBottom+'px',
                    marginRight:tempData.marginRight+'px',
                    paddingTop:tempData.paddingTop+'px',
                    paddingLeft:tempData.paddingLeft+'px',
                    paddingBottom:tempData.paddingBottom+'px',
                    paddingRight:tempData.paddingRight+'px',
                    textAlign:tempData.textAlign == 1?'left':(tempData.textAlign == 2?'right':'center'),
                    lineHeight:tempData.lineHeight+'px',
                    borderWidth:tempData.borderWidth+'px',
                    borderColor:tempData.borderColor,
                    borderStyle:tempData.borderStyle,
                    backgroundColor:tempData.backgroundColor,
                    fontSize:tempData.fontSize+'px',
                    color:tempData.fontColor,
                    fontWeight:tempData.fontWeight,
                    textIndent:tempData.textIndex == 1?tempData.fontSize+'px':0
                }">{{tempData.content}}</div>       
            </div>
            <div v-if="tempData.itemType == 'banner'">
                    <div :style="{
                    marginTop:tempData.marginTop+'px',
                    marginLeft:tempData.marginLeft+'px',
                    marginBottom:tempData.marginBottom+'px',
                    marginRight:tempData.marginRight+'px',
                    borderRadius:tempData.borderRadius+'px',
                    overflow:'hidden'
                }">
                <van-swipe :autoplay="3000" :vertical="tempData.type">
                        <van-swipe-item v-for="(item,index) in (Array.isArray(tempData.content)?tempData.content:[])" :key="index">
                            <img :src="item | restImgUrl" style="width:100%;height: 200px;" />
                        </van-swipe-item>
                    </van-swipe>
                </div>       
            </div>
            <div v-if="tempData.itemType == 'video'" class="video-group">
                <div :style="{
                    marginTop:tempData.marginTop+'px',
                    marginLeft:tempData.marginLeft+'px',
                    marginBottom:tempData.marginBottom+'px',
                    marginRight:tempData.marginRight+'px',
                }">
                    <video :width="tempData.width+'%'" :src="tempData.content | restImgUrl" controls ></video>  
                </div>
            </div>
            <div v-if="tempData.itemType == 'audio'">
                <div :style="{
                    marginTop:tempData.marginTop+'px',
                    marginLeft:tempData.marginLeft+'px',
                    marginBottom:tempData.marginBottom+'px',
                    marginRight:tempData.marginRight+'px',
                }" style="padding:10px 0; min-height: 60px;">
                    <audio width="100%" :src="tempData.content | restImgUrl" controls ></audio>  
                </div>     
            </div>
            <div v-if="tempData.itemType == 'img'">
                <div class="item-type-box">
                    <div v-if="tempData.type>=1">
                        <div class="img-ys-box" :style="{
                            marginTop:tempData.marginTop+'px',
                            marginLeft:tempData.marginLeft+'px',
                            marginBottom:tempData.marginBottom+'px',
                            marginRight:tempData.marginRight+'px'
                        }">
                            <img :src="tempData.childList[0].content | restImgUrl" style="height:auto;width:100%"
                                v-if="tempData.type == 1" />
                            <div class="felx" v-if="tempData.type == 2">
                                <div class="wx-col-6 wx-pad-4">
                                    <img :src="tempData.childList[0].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                                <div class="wx-col-6 wx-pad-4">
                                    <img :src="tempData.childList[1].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                            </div>
                            <div class="felx" v-if="tempData.type == 3">
                                <div class="wx-pad-4 wx-col-s">
                                    <img :src="tempData.childList[0].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                                <div class="wx-pad-4 wx-col-s">
                                    <img :src="tempData.childList[1].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                                <div class="wx-pad-4 wx-col-s">
                                    <img :src="tempData.childList[2].content | restImgUrl" style="height:200px;width:100%" />
                                </div>
                            </div>
                            <div class="felx" v-if="tempData.type == 4">
                                <div class="wx-col-4 wx-pad-4">
                                    <img :src="tempData.childList[0].content | restImgUrl" style="height:408px;width:100%" />
                                </div>
                                <div class="wx-pad-4 wx-col-8" v-if="tempData.type == 4">
                                    <div class="wx-pad-4">
                                        <img :src="tempData.childList[1].content | restImgUrl"
                                            style="height:200px;width:100%" />
                                    </div>
                                    <div class="wx-pad-4">
                                        <img :src="tempData.childList[2].content | restImgUrl"
                                            style="height:200px;width:100%" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex" v-for="(rows,rowIndex) in tempData.row" :key="rowIndex" v-if="tempData.type==''">
                        <div class="wx-pad-4" style="width:100%" v-for="(cols,colIndex) in tempData.col"
                            :key="rowIndex+'-'+colIndex">
                            <div :style="{width:(100/tempData.col)+'%'}">
                                <img :src="tempData.childList[rowIndex*colIndex].content | restImgUrl"
                                    :style="{height:((tempData.row == 1 && tempData.col == 1)?'auto':'200px')}"
                                    style="width:100%" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>`
    })
</script>